<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>设计癖|关注设计癖 发现好设计</title>
        <link rel="shortcut icon" href="images/bitbug_favicon.ico" />
        <style>
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            body{
                background-color: #f5f5f5;
            }
            .header{
                height: 66px;
                width: 100%;
                background-color: #ffffff;
                position: fixed;
                top:0px;
                z-index: 1;
            }
            .banner{
                width: 1211px;
                height: 513px;
                background-color: #ffffff;
                margin: 86px auto 25px;   
            }
            .menu{
                width: 1211px;
                height: 38px;
                background-color: #f5f5f5;
                margin: 0px auto 25px;
            }
            .list{
                width: 1211px;
                min-height: 1000px;
                background-color: #ffffff;
                margin: 0px auto 25px;
                overflow: hidden;

            }
            .more{
                width: 1211px;
                height: 38px;
                margin: 0px auto 25px;
                text-align: center;
                line-height: 38px;
                background-color: #ffffff;
            }
            .header .left{
                float: left;
                margin-left: 36px;
                margin-top: 24px;
            }
            .header .nav{
                float: left;
                margin-left: 255px;
                margin-top: 12px;
            }
            .header .right{
                float: right;
                margin-top: 25px;
                margin-bottom: 27px;
                margin-right: 15px;
            }
            .nav li{
                border: 1px solid #ffffff;
                width: 37px;
                height: 37px;
                border-radius: 50%;
                background-color: yellow;
                float: left;
                padding: auto;
                margin-left: 10px;
                margin-right: 10px;
                text-align:center;
            }
            .nav li:hover{
                animation: myfirst 1s;
            }
            @keyframes myfirst{
                form{transform:rotate(0deg);}to{transform:rotate(-360deg);}
            }
            .banner .left{
                width: 910px;
                float: left;
            }
            .banner .left img{
                width: 910px;
            }
            .banner .right{
                width: 290px;
                float: right;
            }
            .banner .right li{
                width: 290px;
                height: 163px;
                margin-bottom: 12px;
                background-color: red;
                overflow:hidden;
                position: relative;
            }
            .banner .right img{
                width: 290px;
            }
            .banner .right p{
                position: absolute;
                left: 0px;
                bottom: 0px;
                background: rgba(0, 0, 0, 0.5);
                width: 298px;
                height: 40px;
                line-height: 20px;
                color: white;
            }
            .menu li{
                height: 38px;
                border: 1px solid gray;
                width: 132px;
                float: left;
                margin: 0px 0px 16px 16px;
                font-size: 18px;
            }
            .bd{
                width: 100%;
                height: 100%;
                outline: none;
                border: none;
                padding-left: 10px;
                font-size: 18px;
            }
            .menu li span{
                line-height: 38px;
                padding-left: 10px;
            }
            .list li{
                height: 315px;
                width: calc(25% - 10px);
                background-color: #ffffff;
                float: left;
                margin: 5px;
                border-bottom:1px solid #cccccc;
            }
            .list-img{
                position: relative;
            }
            .list-img img{
                width: 100%;
                height: 200px;
            }
            .list-info{
                padding: 10px;
            }
            .list-info p{
                font-size: 18px;
                
            }
            .smalllogo{
                border: 1px solid #ffffff;
                width: 39px;
                height: 39px;
                border-radius: 50%;
                background-color: yellow;
                float: left;
                padding: auto;
                margin-left: 10px;
                margin-right: 10px;
                text-align:center;
                position: absolute;
                left: 0px;
                top: 8px;
            }
            .friend{
                width: 1211px;
                height: 17px;
                margin: 0px auto 0px;
                color: #000000;
            }
            .shangjia{
                width: 1211px;
                height: 70px;
                margin: 50px auto 0px;
                background-color: #f5f5f5;
            }
            .shangjia li img{
                float: left;
                margin-right: 20px;
            }
            .F-link{
                width: 1211px;
                height: 17px;
                margin: 30px auto 0px;
                color: #9c9c9c;
            }
            .footer{
                width: 1211px;
                height: 30px;
                margin: 30px auto 0px;
            }
        </style>
    </head>
    <body>
        <div class="header">
            <span class="left">三</span>
            <ul class="nav">
                <li>赞</li>
                <li>哈</li>
                <li>艹</li>
                <li>买</li>
            </ul>
            <span class="right">登录</span>
        </div>
        <div class="banner">
            <img src="images/s003.jpg" alt="" class="left">
            <ul class="right">
                <li>
                    <img src="images/s02.jpg" alt="">
                    <p>想点亮圣诞气氛？试试这个【驯鹿】<br>灯</p>
                </li>
                <li>
                    <img src="images/s03.jpg" alt="">
                    <p>Designer:100个设计师,100<br>个故事</p >
                </li>
                <li>
                    <img src="images/s04.jpg" alt="">
                    <p>旧椅子获新生，还比以前更加酷炫了</p>
                </li>
            </ul>
        </div>
        <ul class="menu">
            <li>
                <span>最新</span>
            </li>
            <li>
                <select name="" class="bd">
                    <option value="">最新</option>
                </select>
            </li>
            <li>
                <select name="" class="bd">
                    <option value="">热议</option>
                </select>
            </li>
            <li>
                <span>随机</span>
            </li>
        </ul>
        <ul class="list">
            <li>
                <div class="list-img">
                    <img src="./images/i01.jpg" alt="">
                </div>
                <div class="list-info">
                    <p>用水才能擦去笔迹，它只想保护好设计师的创意</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i02.jpg" alt="">
                </div>
                <div class="list-info">
                    <p>马桶刷也要有优雅的姿态</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i03.jpg" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>健身也走【科技范】，你以为这仅仅是个瑜伽垫？</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i04.jpg" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>牙缝清洁怎么办？牙签牙线都过时了，用【刷子】刷吧</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i05.jpg" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>矮怎么了？照样也能拿到书架顶端的书</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i06.png" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>这简直是一场关于肉体的盛宴，无关设计，无关时尚，无关商业...</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i07.jpg" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>中国国际设计节PK世界工业设计大会，哪个更棒？</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i07.png" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>首届世界工业设计大会开在家门口杭州，中国设计师们燥起来</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i08.jpg" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>窝在北方的暖炉里，你应该需要这样一个散热阀门？</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i09.jpg" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>废纸打造的铅笔，像一朵朵落入凡间的花</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i10.jpg" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>倚靠在毯子上，这件事听着就让人舒服</p>
                </div>
            </li>
            <li>
                <div class="list-img">
                    <img src="./images/i11.jpg" alt="">
                    <span class="smalllogo">赞</span>
                </div>
                <div class="list-info">
                    <p>别笑话虚拟键盘没有实体按键，打字or音乐，它们说变就变</p>
                </div>
            </li>
        </ul>
        <p class="more">
            太快了吧，慢慢来
        </p>
        <p class="friend">合作伙伴</p>
        <div class="shangjia">
            <ul>
                <li>
                    <img src="images/x01.png" alt="">
                </li>
                <li>
                    <img src="images/x02.png" alt="">
                </li>
                <li>
                    <img src="images/x03.png" alt="">
                </li>
                <li>
                    <img src="images/x04.png" alt="">
                </li>
                <li>
                    <img src="images/x05.png" alt="">
                </li>
                <li>
                    <img src="images/x06.png" alt="">
                </li>
                <li>
                    <img src="images/x07.jpg" alt="">
                </li>
            </ul>
        </div>
        <div class="footer">
            <img src="images/666.png" alt="">
        </div>
    </body>
</html>